<template>
	<view class="chooseMantainStore">
		<view class="header">
			<navigator open-type="navigateBack" delta="1">
				<image src="../../static/image/fanhui (2).png" mode="widthFix" style="width: 80rpx;"></image>
			</navigator>
			<text>订单详情</text>
		</view>
		<view class="choose4s">
			<view class="item">
				<image src="../../static/image/daodianbaoyang@3x.png" mode="widthFix" style="width: 100rpx;"></image>
				<text>选择4s店</text>
			</view>
			<view class="item">
				<image src="../../static/image/mendian@3x.png" mode="widthFix" style="width: 100rpx;"></image>
				<text>在线/到店付</text>
			</view>
			<view class="item">
				<image src="../../static/image/shoujizhifu@3x.png" mode="widthFix" style="width: 100rpx;"></image>
				<text>到店保养</text>
			</view>
		</view>
		<view class="informationCar">
			<view class="item">
				<text class="title">城市</text>
				<text>成都</text>
			</view>
			<view class="item">
				<text class="title">车牌号</text>
				<text>川 A00000</text>
			</view>
			<view class="item">
				<text class="title">车型</text>
				<text>{{currentCar}}</text>
			</view>
			<view class="item">
				<text class="title">购车时间</text>
				<text>2020年10月</text>
			</view>
			<view class="item">
				<text class="title">行驶里程</text>
				<text>4000 km</text>
			</view>
		</view>
		<view class="storeComp">
			<text class="title">4s门店</text>
			<view class="sort">
				<view class="item">
					<text>综合排序</text>
					<image src="../../static/image/paixu@3x.png" mode="widthFix" style="width: 20.1rpx;"></image>
				</view>
				<view class="item">
					<text>距离</text>
					<image src="../../static/image/homeAddressIcon.png" mode="widthFix" style="width: 20rpx;"></image>
				</view>
			</view>
			<view class="homeStore" v-for="item in near.searchHits" :key="item.shopId">
				<navigator :url="'/pages/home/maintainStore?shopId='+item.content.shopId">
					<HomeStore :shopName="item.content.shopName" :shopImage="item.content.shopImage" :shopAddress="item.content.shopAddress" />
				</navigator>
				<view class="button">预定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HomeStore from "../../components/homeStore/HomeStore.vue"
	//vuex
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers(
		"home"
	);
	export default {
		components: {
			HomeStore
		},
		mounted() {
			this.getLocation()
		},
		data() {
			return {
				//位置信息
				longitude: '',
				latitude: '',
				//当前车型
				currentCar:null
			}
		},
		onLoad(options) {
			this.currentCar = options.currentCar
		},
		computed: {
			...mapState(["near"])
		},
		methods: {
			//附近店铺
			...mapActions(["nearStore"]),
			//获取经纬度
			getLocation() {
				const $this = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						$this.nearStore({
							lat: res.latitude - 0,
							lng: res.longitude - 0,
							distance: 10
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chooseMantainStore {
		position: relative;
		background-color: #f9f9f9;
		height: 800px;

		.header {
			height: 340rpx;
			background: linear-gradient(120deg, #fd8839, #fd873c, #fd8846, #fd8c38, #fda548, #fda548, #fd793a, #fd883a);
			color: white;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 40rpx 0;

			text {
				margin-left: 240rpx;
			}
		}

		.choose4s {
			width: 660rpx;
			height: 200rpx;
			position: absolute;
			padding: 0 24rpx;
			top: 220rpx;
			left: 0;
			background-color: #FFFFFF;
			margin: 24rpx;
			border-radius: 20rpx;
			box-shadow: -1px 1px 3px 1px rgba(gray, 0.4);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 32rpx;
			}
		}

		.informationCar {
			padding: 24rpx;
			margin: 24rpx;
			margin-top: 140rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;

			.item {
				display: flex;
				font-size: 28rpx;
				margin: 40rpx 0;
				border-bottom: 1px solid #f5f5f5;

				.title {
					font-weight: bold;
					font-size: 28rpx;
					width: 200rpx;
				}
			}
		}

		.storeComp {
			padding: 24rpx;
			margin: 24rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.sort {
				font-size: 24rpx;
				display: flex;

				.item {
					margin: 20rpx 20rpx 20rpx 0;
				}
			}

			.homeStore {
				display: flex;
				align-items: flex-end;

				.button {
					font-size: 28rpx;
					color: #FFFFFF;
					background-color: #ff5300;
					height: 40rpx;
					width: 80rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 20rpx;
					margin: 40rpx 0;
				}
			}
		}
	}
</style>
